<template>
  <div class="login">
    <!-- 头部标题 -->
    <Header/>
    
    <!-- 主要内容 -->
    <div class="login-banner">
      <div class="cover"> 
        <img src="./images/cover.png">
      </div>
      <form>
        <div class="input-row">
          <div class="input-label">手机号码</div>
          <div class="input" id="phoneInput">
            <input type="text" placeholder="请输入手机号" id="userPhone">
          </div>
        </div>

        <div class="input-row">
          <div class="input-label">&nbsp;&nbsp;&nbsp;验证码</div>
          <div class="input" id="codeInput">
            <input type="text" placeholder="请输入验证码" id="codeInput">
          </div>
          <div class="input-label send">发送验证码</div>
        </div>

        <div class="input-row">
          <div class="input-label">登录密码</div>
          <div class="input" id="pwdInput">
            <input type="password" placeholder="请输入密码" id="userPwd">
          </div>
        </div>
      </form>
      <button class="btn btn-reg" id="regBtn" @click="goHmoe">注册并登录</button>
      <button class="btn btn-login" id="loginBtn" @click="goLogin">登录</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    methods: {
      goHmoe() {
        this.$router.push('/home');
      },
      goLogin(){
        this.$router.push('/login');
      }
    }
  }
</script>

<style scoped>
  .login {
    width: 100vw;
    height: 100vh;
    text-align: center;
  }
  .login .login-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 6.6vh;
    background-color: #1B82D2;
  }
  .login .login-header-tt {
    font-size: 3vh;
    font-weight: 400;
    color: #fff;
  }
  .login .cover>img {
    width: 100%;
    height: auto;
    margin-bottom: 2.4vh;
  }
  .login .input-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 96vw;
    height: 7vh;
    margin-left: 1.6vw;
    border: 0.4vw solid #ccc;
    text-align: left;
  }
  .login .input-label,
  .login .input {
    display: inline-block;
  }
  .login .input-label {
    font-size: 2.6vh;
    margin-left: 2vw;
  }
  .login .send {
    padding-left: 3vw;
    color: #118EE9;
    border-left: 0.5vw solid #ccc;
  }
  .login .input>input {
    display:flex;
    align-items: center;
    width: 70vw;
    height: 2.6vh;
    margin-left: 2vw;
    padding-top: 1%;
    font-size: 2.6vh;
    border: 0;
  }
  .login #codeInput>input {
    width: 42vw;
  }
  .login .btn {
    display: block;
    width: 96.8vw;
    height: 7vh;
    margin-left: 1.6vw;
  }
  .login .btn#regBtn{
    margin-top: 3vh;
    color: #fff;
    font-size: 3vh;
    background-color: #118EE9;
    border: 0.4vw solid #118EE9;
    border-radius: 0.8vh;
  }
  .login .btn#loginBtn{
    margin-top: 2vh;
    color: #000;
    font-size: 3vh;
    background-color: #fff;
    border: 0.4vw solid #ccc;
    border-radius: 0.8vh;
  }
</style>